<template>
    <div class="son2">
        <img src="../../assets/indexImg/two_top_img.png" class="work">
        <div class="swiper-container-son2">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-son1" v-for="(value,item) of imgList2" :key="item">
                    <img :src="`http://www.shangyuninfo.com/api/profile/product/${value.productRotation}`"
                         alt="" @click="toDetail(value.id)">
                </div>
            </div>
        </div>
        <img src="../../assets/indexImg/four_more.png" class="more-img"  @click="$router.push('/aboutUs')" style="cursor: pointer">
    </div>
</template>

<script>
    import {getProductListSon2} from "../../api";
    //轮播图相关
    import 'swiper/dist/js/swiper'
    import 'swiper/dist/css/swiper.css'
    import Swiper from "swiper"

    export default {
        name: "page2",
        data() {
            return {
                imgList2: [],
            }
        },
        created() {
            // console.log("aiusfghoai")
            getProductListSon2().then(res => {
                // console.log(res)
                this.imgList2 = res.data.rows
            })
        },
        watch: {
            imgList2() {
                setTimeout(() => {
                    // eslint-disable-next-line no-unused-vars
                    let swiper = new Swiper(".swiper-container-son2", {
                        pagination: '.swiper-pagination',
                        effect: 'coverflow',
                        grabCursor: true,
                        centeredSlides: true,
                        slidesPerView: 'auto',
                        initialSlide: 3,
                        loop: false,
                        coverflow: {
                            rotate: 20,
                            stretch: 100,
                            depth: 100,
                            modifier: 3,
                            slideShadows: true
                        },
                        autoplay: {
                            delay: 3000,
                            stopOnLastSlide: false,
                            disableOnInteraction: true,
                        },
                    })
                }, 0)
            }
        },
        methods: {
            test() {
                console.log('dasihgfuds')
            },
            toDetail(to){
                this.$router.push({
                    path:'/detailsForNews',
                    query:{
                        id:to,
                        select:'产品详情',
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .swiper-container {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 200px;
    }

    //全局设定
    .son2 {
        max-width: 1000px !important;
        height: 60%;
        margin: auto;
        margin-top: 180px;
        overflow: hidden;
    }

    //设置图片大小占满
    .swiper-slide-son1 {
        width: 250px;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .swiper-container-son2 {
        height: 100% !important;
        width: 100%;
        margin: auto;
    }

    .swiper-wrapper {
        /*overflow: hidden;*/
        width: 200%;
        justify-content: space-evenly;
        left: -300px;
    }

    //两个前进后退的css
    .swiper-button-prev {
        left: 50px;
        padding: 20px;
    }

    .swiper-button-next {
        right: 50px;
        padding: 20px;
    }

    .swiper-pagination-son1 {
        position: absolute;
        z-index: 2;
        left: 45%;
        top: 92%;
    }

    //点点
    /deep/ .swiper-pagination-bullet {
        width: 15px;
        height: 15px;
        margin: 0px 10px !important;
        background-color: white !important;
    }

    //work图片
    .work {
        position: absolute;
        top: 0px;
        width: 100%;
        left: 0px;
        height: 380px;
        background-color: #2b2b2b;
        opacity: 0.2;
    }
    .more-img {
        position: absolute;
        z-index: 12;
        top: 80%;
        left: 65%;
    }
</style>
